<template>
  <video-upload :vid="vid" @finish="finishUpload"></video-upload>
  <div class="video-box">
    <n-scrollbar style="max-height: 300px;">
      <div class="video-item" v-for="(item, index) in uploadVideoList">
        <div class="item-left">
          <n-icon class="item-icon">
            <Videocam/>
          </n-icon>
          <span v-if="!item.modify" @click="titleClick(item, index)">P{{ index + 1 }} {{ item.title }}</span>
          <n-input-group v-else>
            <n-input ref="titleInput" v-model:value="modifyForm.title" maxlength="50" show-count
                     @blur="item.modify = false"/>
            <!-- 使用mousedown触发而不是click触发，因为input的blur要早于click -->
            <n-button style="width: 30%;" type="primary" @mousedown="modifyTitle(item)">修改</n-button>
          </n-input-group>
          <n-tag class="tag" :type="toTagType(item.review)">{{ toTagText(item.review) }}</n-tag>
        </div>
        <div class="item-right" @click="deleteResource(item.id, index)">
          <span class="delete">删除</span>
        </div>
      </div>
    </n-scrollbar>
  </div>
  <div class="upload-next-btn">
    <n-button type="primary" @click="submitReview">提交审核</n-button>
  </div>

</template>

<script lang="ts">
import {onBeforeMount, reactive, nextTick, ref, defineComponent} from "vue";
import {submitReviewAPI} from '@/api/review';
import {deleteResourceAPI, modifyTitleAPI, getResourceListAPI} from "@/api/video";
import VideoUpload from "./VideoUpload.vue";
import {NScrollbar, NInput, NInputGroup, NButton, NIcon, NTag, useNotification} from "naive-ui";
import {Videocam} from "@vicons/ionicons5";
import {baseResourceType, reviewResourceType} from "@/types/resource";

export default defineComponent({
  props: {
    vid: {
      type: Number,
      required: true
    }
  },
  setup(props) {
    const vid = props.vid;
    const uploadVideoList = ref<Array<reviewResourceType>>([]);
    const notification = useNotification();//通知

    const toTagType = (state: number) => {
      switch (state) {
        case 2000:
          return "success";
        case 200:
        case 1000:
          return "info";
        default:
          return "error";
      }
    }

    const toTagText = (state: number) => {
      switch (state) {
        case 200:
          return "视频处理中";
        case 1000:
          return "等待审核";
        case 2000:
          return "审核通过";
        case 3100:
          return "视频信息存在问题";
        case 3200:
          return "视频内容存在问题";
        case 3300:
          return "视频处理失败";
        default:
          return "未知";
      }
    }

    const finishUpload = () => {
      getResourceList();
    }

    const getResourceList = () => {
      getResourceListAPI(vid!).then((res) => {
        if (res.data.code === 2000) {
          uploadVideoList.value = res.data.data.resources;
        }
      }).catch((err) => {
        notification.error({
          title: '获取失败',
          content: "原因:" + err.response.data.msg,
          duration: 5000,
        })
      });
    }

    const submitReview = () => {
      submitReviewAPI(vid!).then((res) => {
        if (res.data.code === 2000) {
          notification.success({
            title: '提交成功',
            duration: 5000,
          })
        }
      }).catch((err) => {
        notification.error({
          title: '提交失败',
          content: "原因:" + err.response.data.msg,
          duration: 5000,
        })
      });
    }

    const deleteResource = (id: number, index: number) => {
      deleteResourceAPI(id).then((res) => {
        if (res.data.code === 2000) {
          uploadVideoList.value.splice(index, 1);
        }
      }).catch(() => {
        notification.error({
          title: '删除失败',
          duration: 5000,
        })
      });
    }

    //修改资源名
    const titleInput = ref<Array<HTMLElement>>([]);
    const modifyForm = reactive<baseResourceType>({
      id: 0,
      title: '',
    });

    //点击标题
    const titleClick = (resource: reviewResourceType, index: number) => {
      modifyForm.id = resource.id;
      modifyForm.title = resource.title;
      resource.modify = true;
      nextTick(() => {
        titleInput.value[index].focus();
      })
    }

    //修改标题
    const modifyTitle = (resource: reviewResourceType) => {
      modifyTitleAPI(modifyForm).then((res) => {
        if (res.data.code === 2000) {
          resource.title = modifyForm.title;
          notification.success({
            title: '修改成功',
            duration: 5000,
          })
        }
      }).catch(() => {
        notification.error({
          title: '修改失败',
          duration: 5000,
        })
      });
    }

    onBeforeMount(() => {
      getResourceList();
    })

    return {
      vid,
      titleInput,
      modifyForm,
      uploadVideoList,
      finishUpload,
      modifyTitle,
      titleClick,
      toTagType,
      toTagText,
      submitReview,
      deleteResource,
    }
  },
  components: {
    NTag,
    NIcon,
    NInput,
    NButton,
    NInputGroup,
    VideoUpload,
    NScrollbar,
    Videocam
  }
});
</script>

<style lang="less" scoped>
.video-box {
  width: 80%;
  margin: 0 auto;
  padding-bottom: 50px;


  .video-item {
    height: 60px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #efeff5;
    margin: 10px 20px;

    .item-left {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .item-icon {
        font-size: 26px;
        color: #18a058;
        padding-right: 10px;
      }

      .tag {
        margin-left: 10px;
      }
    }

    .item-right {
      .delete {
        cursor: pointer;
        color: #767c82;

        &:hover {
          color: #18a058;
        }
      }
    }
  }
}

.upload-next-btn {
  float: right;
  margin: 10px 20px 20px;

  button {
    width: 160px;
    height: 40px;
  }
}
</style>